<template>
	<view class="one">
		<view class="nav">
			<!-- 顶部操作栏 -->
		
			
			<!-- 输入区域 -->
			<view class="input-section">
				<!-- 手机号输入 -->
				<view class="input-box">
					<image class="phone-icon" src="/static/手机号@3x.png" mode="aspectFit"></image>
					<input 
						type="number" 
						v-model="phone" 
						placeholder="请输入手机号码" 
						placeholder-style="color: #CCCCCC;"
						maxlength="11"
						class="phone-input"
					/>
					<text v-if="phone" class="clear-icon" @click="clearPhone">×</text>
				</view>
				
				<!-- 验证码输入 -->
				<view class="verify-container">
					<view class="input-box verify-input-box">
						<image class="verify-icon" src="/static/验证码@3x.png" mode="aspectFit"></image>
						<input 
							type="number" 
							v-model="verifyCode" 
							placeholder="输入验证码" 
							placeholder-style="color: #CCCCCC;"
							maxlength="6"
							class="verify-input"
						/>
					</view>
					<button 
						class="verify-btn" 
						:disabled="!canGetCode" 
						@click="getVerifyCode"
					>{{canGetCode ? '获取验证码' : countdown + 's'}}</button>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="submit-btn" @click="submitEdit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				verifyCode: '',
				canGetCode: true,
				countdown: 60
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			clearPhone() {
				this.phone = ''
			},
			getVerifyCode() {
				if(!this.phone || this.phone.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				this.canGetCode = false
				this.startCountdown()
				// 这里添加获取验证码的接口调用
			},
			startCountdown() {
				let timer = setInterval(() => {
					this.countdown--
					if(this.countdown <= 0) {
						clearInterval(timer)
						this.countdown = 60
						this.canGetCode = true
					}
				}, 1000)
			},
			submitEdit() {
				if(!this.phone || !this.verifyCode) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				// 这里添加提交修改的接口调用
			}
		}
	}
</script>

<style>
page{
	background:#F7F7F7;
}  
.one{
	padding-top: 20rpx;
	height: 250rpx;
	background-color: #2D80F9;
}
.nav{
	width: 680rpx;
	background-color: white;
	min-height:500rpx;
	height: auto;
	border-radius: 20rpx;
	margin: 0 auto;
	padding-bottom: 40rpx;
}

/* 新增样式 */
.top-bar {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 40rpx;
}

.top-bar-bottom {
	height: 2rpx;
	background-color: #F6F6F6;
	margin: 0 20rpx;
}

.cancel, .confirm {
	font-size: 32rpx;
}

.cancel {
	color: #333;
}

.confirm {
	color: #2D80F9;
}

.input-section {
	padding: 40rpx;
}

.input-box {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #F2F2F2;
	border-radius: 50rpx;
	margin-bottom: 30rpx;
}

.phone-icon, .verify-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.phone-input, .verify-input {
	flex: 1;
	font-size: 28rpx;
	height: 40rpx;
	min-height: 40rpx;
	line-height: 40rpx;
}

.clear-icon {
	color: #999;
	font-size: 32rpx;
	padding: 0 20rpx;
	height: 40rpx;
	line-height: 40rpx;
}

.verify-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.verify-input-box {
	flex: 1;
	margin-bottom: 0;
	margin-right: 20rpx;
}

.verify-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 26rpx;
	color: #FFFFFF;
	background-color: #2D80F9;
	border: none;
	border-radius: 40rpx;
	text-align: center;
	padding: 0;
}

.verify-btn[disabled] {
	color: #FFFFFF;
	background-color: #CCCCCC;
}

.submit-section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0;
	position: relative;
}

.submit-btn {
	width: 600rpx;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #2D80F9;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 44rpx;
	text-align: center;
	margin: 0 auto;
	border: none;
}
</style>
